<template>
    <div style="background-color: rgba(0, 0, 0, 0.05)">
        <div style="background-color: pink;width: 100%;height: 400px">
            <div style="width: 100%;background-color: #8c939d;height: 50px"></div>
            <div style="width: 50%;background-color: blue;height: 350px"></div>
        </div>

        <el-tabs type="border-card">
            <el-tab-pane label="单位净值走势">
                <!--柱状图-->
                <div id="main"
                     style="width:1655px;height:500px;margin-left:5px;margin-top: 30px;background-color: white"
                     ref="chart"></div>
            </el-tab-pane>
            <el-tab-pane label="总净值走势">
                <!--柱状图-->
                <div id="main1"
                     style="width:1655px;height:500px;margin-left:5px;margin-top: 30px;background-color: white"
                     ref="chart"></div>
            </el-tab-pane>
            <el-tab-pane label="累计净值走势">
                <!--柱状图-->
                <div id="main2"
                     style="width:1655px;height:500px;margin-left:5px;margin-top: 30px;background-color: white"
                     ref="chart"></div>

            </el-tab-pane>

        </el-tabs>


    </div>

</template>

<script>

    let echarts = require('echarts/lib/echarts');
    // 引入饼状图组件
    require('echarts/lib/chart/pie');

    export default {
        name: "home",
        data() {
            return {
                // 7天日期
                dates: ['2021-02-18', '2021-02-18', '2021-02-18', '2021-02-18', '2021-02-18', '2021-02-18', '2021-02-18'],
                // 登录数
                loginNum: [12, 123, 423, 2345, 2134, 123, 423],
                // 注册数
                registerNum: [945, 789, 34, 216, 35, 52, 154],
                // 认证数
                authNum: [36, 234, 675, 26, 346, 643, 64],
            }
        },
        methods: {
            initCharts() {
                var chart = document.getElementById('main');
                let myChart = echarts.init(chart);
                // 绘制图表
                myChart.setOption(
                    {
                        title: {
                            text: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['登录', '注册', '认证'],
                            left: '10',
                        },
                        grid: {
                            left: '2%',
                            right: '6%',
                            bottom: '5%',
                            containLabel: true
                        },

                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.dates
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '登录',
                                type: 'line',
                                data: this.loginNum,
                                color: 'rgb(98, 108, 145)',
                                smooth: false,
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                }
                            },
                            {
                                name: '注册',
                                type: 'line',
                                data: this.registerNum,
                                color: "rgb(107, 230, 193)",
                                smooth: false,
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                }
                            },
                            {
                                name: '认证',
                                type: 'line',
                                data: this.authNum,
                                color: "rgb(63, 177, 227)",
                                smooth: false,
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                }
                            },

                        ]
                    }
                );

            },

            initCharts1() {
                var chart = document.getElementById('main1');
                let myChart = echarts.init(chart);
                // 绘制图表
                myChart.setOption(
                    {
                        title: {
                            text: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['登录', '注册', '认证'],
                            left: '10',
                        },
                        grid: {
                            left: '2%',
                            right: '6%',
                            bottom: '5%',
                            containLabel: true
                        },

                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.dates
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '登录',
                                type: 'line',
                                data: this.loginNum,
                                color: 'rgb(98, 108, 145)',
                                smooth: false,
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                }
                            },
                            {
                                name: '注册',
                                type: 'line',
                                data: this.registerNum,
                                color: "rgb(107, 230, 193)",
                                smooth: false,
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                }
                            },
                            {
                                name: '认证',
                                type: 'line',
                                data: this.authNum,
                                color: "rgb(63, 177, 227)",
                                smooth: false,
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                }
                            },

                        ]
                    }
                );

            },

            initCharts2() {
                var chart = document.getElementById('main2');
                let myChart = echarts.init(chart);
                // 绘制图表
                myChart.setOption(
                    {
                        title: {
                            text: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['登录', '注册', '认证'],
                            left: '10',
                        },
                        grid: {
                            left: '2%',
                            right: '6%',
                            bottom: '5%',
                            containLabel: true
                        },

                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.dates
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '登录',
                                type: 'line',
                                data: this.loginNum,
                                color: 'rgb(98, 108, 145)',
                                smooth: false,
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                }
                            },
                            {
                                name: '注册',
                                type: 'line',
                                data: this.registerNum,
                                color: "rgb(107, 230, 193)",
                                smooth: false,
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                }
                            },
                            {
                                name: '认证',
                                type: 'line',
                                data: this.authNum,
                                color: "rgb(63, 177, 227)",
                                smooth: false,
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                }
                            },

                        ]
                    }
                );

            },

        },
        mounted() {
            //柱状图
            this.initCharts();
            this.initCharts1();
            this.initCharts2();


        }

    }
</script>

<style lang="less">
    .box-card {
        height: 110px;
        position: relative;
    }

    .box-card:hover {
        box-shadow: 5px 5px 5px #888888;
        transform: scale(1.05);
        transition: 0.5s;

    }

    .register-text {
        float: right;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
        padding-left: 210px;
        position: absolute;
    }

    .register-text-money {
        float: right;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
        padding-left: 200px;
        position: absolute;
    }


</style>
